<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="image/LOGO.jpg" type="image/x-icon" />
<title>登录</title>
<style>
.g-wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
}

.g-container {
  position: relative;
  width: 318px;
  margin: 100px auto;
  height: 370px;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  z-index: 10;
}
.g-container h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
}
.g-container input {
  outline: none;
  padding: 10px;
  width: 100%;
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  outline: none;
  box-sizing: border-box;
  font-size: 16px;
}

img {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 120px;
  height: 95px;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

.g-username {
  margin-bottom: 10px;
}
.g-username img {
  display: none;
  width: 120px;
  height: 113px;
}

.g-username:focus-within ~ img {
  display: none;
}

.g-username:focus-within input {
  border-color: #007fff;
}
.g-username:focus-within img {
  display: block;
}

.g-password {
  margin-bottom: 10px;
}
.g-password img {
  display: none;
  width: 103px;
  height: 84px;
  top: -15%;
}

.g-password:focus-within ~ img {
  display: none;
}

.g-password:focus-within input {
  border-color: #007fff;
}
.g-password:focus-within img {
  display: block;
}
VIEW SCSS CODEVIEW 
	</style>
</head>

<body>
<div class="g-wrap"></div>
<div class="g-container">
    <h2>登录</h2>
		 <form name="form1" id="fo1" method="post" action="enter.php" onSubmit="return funSub();">
    <div class="g-username">
			
        <input name="username" id="username" maxlength="64" placeholder="请输入手机号或邮箱" class="input">
        <img src="image/greeting.1415c1c.png" class="g-username">
    </div>
    
    <div class="g-password">
        <input  name="password" id="password" type="password" maxlength="64" placeholder="请输入密码" class="input">
        <img src="image/blindfold.58ce423.png" class="g-password">
    </div>
    
    <img src="image/normal.0447fe9.png" class="g-normal">
 <input type="submit" value="提交" name="btn_sub" class="btnStyle">
                   <input type="button" value="注册" onclick="register()"> 
</div> 

</form>


	  <script>
	       function funSub(){
				if(form1.username.value==""&&form1.username.value=="0"){
					alert("用户名格式不对!");
					return false;
				}
	     if(form1.password.value==""&&form1.password.value=="0"){
	       alert("密码格式不对!");
	       return false;
	     }
				return true;
	           }
	
	
			function register() 
	{ 
	window.location.href="register.html";//跳转到注册页面 
	} 
	
</script>
</body>
</html>
